<template>
    <div class="comment-item">
        <div class="header">
            <div class="img">
                <img :src="comment.avatar" alt="">
            </div>
            <div class="info">
                <div class="info-top">
                    <h3>{{ comment.username }}</h3>
                    <span class="el-icon-chat-dot-round com-btn" @click="isShowReply(comment.id)"> 评论</span>
                </div>
                <h4>{{ comment.createTime }}</h4>

            </div>
        </div>
        <div class="com-cont">
            {{ comment.content }}
        </div>
        <div v-show="isShowId === comment.id" class="com-textarea">
            <textarea class="_j_comment_content" placeholder="说点什么吧..." v-model="content"></textarea>
            <span class="btn" @click="addComment(comment.id, comment.createdBy)">评论</span>
        </div>
        <!-- <div class="com-bottom">
            <i class="el-icon-chat-dot-round"> 回复</i>
        </div> -->
        <!-- 次级评论 -->
        <div class="com-reply" v-for="item in comment.children" :key="item.id">
            <div class="reply-header">
                <div class="img">
                    <img :src="item.avatar" alt="">
                </div>
                <div class="info">
                    <div class="info-top">
                        <h3>{{ item.username }} <span class="info-top-span">回复</span> {{ item.toCommentUsername }}</h3>
                        <span class="el-icon-chat-dot-round" @click="isShowReply(item.id)"> 评论</span>
                    </div>
                    <h4>{{ item.createTime }}</h4>
                </div>
            </div>
            <div class="reply-cont">{{ item.content }}</div>
            <div v-show="isShowId === item.id" class="com-textarea">
                <textarea class="_j_comment_content" placeholder="说点什么吧..." v-model="content"></textarea>
                <span class="btn" @click="addComment(item.id, item.createdBy)">评论</span>
            </div>
        </div>
        <div align="center" class="m-pagination"></div>

        <!-- 评论框 -->
        <!-- <el-dialog title="评论" :visible.sync="centerDialogVisible" width="40%" center>
            <textarea class="_j_comment_content" placeholder="说点什么吧..." v-model="content"></textarea>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="centerDialogVisible = false">发布</el-button>
                <el-button @click="centerDialogVisible = false">取 消</el-button>
            </span>
        </el-dialog> -->
    </div>
</template>
 
<script>
import { addComment } from '@/api/blog'
import { mapGetters } from 'vuex'

export default {
    name: 'CommentListItem',
    props: [
        'comment'
    ],
    data() {
        return {
            children: [],
            centerDialogVisible: false,
            content: '',
            firstComment: false,
            secondComment: false,
            isShowId: '',
            clickedId: ''
        }
    },
    computed: {
        ...mapGetters([
            'refreshComment'
        ]),
        
    },
    watch: {
        refreshComment(){
            this.$forceUpdate()
            // this.children = this.comment.children
        },
        children: {
            deep: true,
            handler(newVal){
                this.children = newVal
                // console.log('children发生了变化',this.children)
            },
            immediate:true
        },
        // comment: {
        //     deep: true,
        //     handler(newVal){
        //         this.comment = newVal
        //     }
        // }
    },
    mounted() {
        // console.log('commentItem')
        // console.log(this.comment)
        this.children = this.comment.children
    },
    methods: {
        async addComment(id, toUid) {
            console.log(id, toUid)
            // console.log(this.comment)
            if (!this.content) {
                this.$message.warning('评论不能为空')
                return
            }
            this.form = {
                blogId: this.comment.blogId,
                rootId: this.comment.id,
                toCommentId: id,
                toCommentUid: toUid,
                content: this.content
            }
            console.log(this.form)
            const res = await addComment(this.form)
            if (res.code === 200) {
                this.$message.success('发布成功')
                // 刷新评论
                this.$store.commit('blog/SET_REFRESH_COMMENT',true)
                
                this.$forceUpdate()
            } else {
                this.$message.error('发布失败')
            }
            this.isShowId = this.clickedId = ''
            this.content = ''
            
        },
        isShowReply(id) {
            if (id) {
                // 保存当前点击的id
                this.isShowId = id
                // console.log('当前的评论id:',this.isShowId);
                if (this.isShowId === this.clickedId) {
                    this.isShowId = ''
                } else {
                    this.isShowId = id
                }
                // 保存当前的评论框id
                this.clickedId = this.isShowId
                this.content = ''
                
            } else {
                this.isShowId = this.clickedId = ''
            }
        }
    }
}
</script>
 
<style lang="less" scoped>
.comment-item {
    width: 800px;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 0;
    margin-top: 10px;
    margin-bottom: 10px;

    .el-icon-chat-dot-round,
    .com-btn {
        font-size: 16px;
    }

    .header {
        display: flex;
        align-items: start;
        align-content: center;
        box-sizing: border-box;
        height: 40px;

        .img {
            overflow: hidden;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            float: left;

            img {
                width: 100%;
                height: 100%;
                display: block;
                border: 0;
                // vertical-align: middle;
            }

        }

        .info {
            float: left;
            margin-left: 16px;
            // padding-top: 10px;
            width: 615px;
            position: relative;
            height: 40px;

            .info-top {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 0px;
            }

            h3 {
                font-size: 16px;
                color: #333;
                font-weight: normal;
                line-height: 16px;
            }

            h4 {
                font-size: 12px;
                color: #999;
                font-weight: normal;
                // line-height: 14px;
            }


        }
    }

    .com-cont {
        margin-left: 56px;
        font-size: 16px;
        color: #666;
        line-height: 28px;
        // margin-top: 8px;

    }

    .com-bottom {
        margin-top: 10px;
        // margin-bottom: 5px;
        margin-left: 64px;
        display: flex;
        // justify-content: flex-end;
    }

    .com-reply {
        display: flex;
        flex-direction: column;
        margin-left: 64px;
        margin-top: 10px;
        margin-bottom: 10px;
        // background-color: #e6e6e6;
        // border-left: #d0be1f 3px solid;
        // padding: 10px 20px;

        .reply-header {
            display: flex;
            align-items: center;
            align-content: center;

            .img {
                overflow: hidden;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                float: left;

                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    border: 0;
                    // vertical-align: middle;
                }

            }

            .info {
                float: left;
                margin-left: 16px;
                padding-top: 10px;
                width: 615px;
                position: relative;

                .info-top {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 0px;

                    .info-top-span {
                        margin-left: 10px;
                        margin-right: 10px;
                        // font-size: 16px;
                        font-weight: normal;
                        color: #a0a0a0;
                    }
                }

                h3 {
                    font-size: 16px;
                    color: #333;
                    font-weight: normal;
                    line-height: 16px;
                }

                h4 {
                    font-size: 12px;
                    color: #666;
                    font-weight: normal;
                    // line-height: 14px;
                }


            }

        }

        .reply-cont {
            margin-left: 56px;
            font-size: 16px;
            color: #666;
            line-height: 28px;
            // margin-top: 8px;

        }
    }

    .m-pagination {
        // padding: 5px;
        line-height: 24px;
        text-align: right;
        font-size: 12px;
        color: #999;
    }

    .com-textarea {
        margin-top: 10px;
        margin-left: 64px;
        display: flex;
        flex-direction: column;
        align-items: end;
        border: 1px solid #ffa200;
        border-radius: 5px;

        textarea {
            height: 55px;
            width: 95%;
            padding: 14px;
            border: none;
            resize: none;
            outline: 0;
            border-radius: 5px;
            font-size: 14px;
            color: #666;
            // border: 1px solid #ffa200;
        }

        .btn {
            margin-bottom: 5px;
            margin-right: 5px;
            display: inline-block;
            width: 98px;
            height: 28px;
            background: #ff9d00;
            border: 1px solid #ff9d00;
            text-align: center;
            font-size: 16px;
            border-radius: 20px;
            color: #fff;
            line-height: 28px;
        }
    }


}
</style>